<template>
  <div style="width: 50%;margin: 0 auto">
    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item   label="注射地区" prop="region">
        <div class="region">
          <el-input disabled v-model="userForm.province"></el-input>-
          <el-input disabled v-model="userForm.city"></el-input>-
          <el-input disabled v-model="userForm.region"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.vname"></el-input>
      </el-form-item>
      <el-form-item label="疫苗描述" prop="msg">
        <el-input v-model="ruleForm.vmsg"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="beforeStep('ruleForm')">上一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "ConfirmMessage",
  props:["confirm","userForm"],
  data(){
    return{
      flag:'confirm',
      currentActive:3,
      ruleForm:{
        name:'',
        phone:'',
        telephone:'',
        gender:'',
        vid:'',
        vname:'',
        vmsg:'',
        province:'',
        city:'',
        region:''
      }
    }
  },
  methods:{
    submitForm(formName){
      console.log(this.ruleForm)
      axios({
        url:'http://localhost:88/api/order/order/insertOrder',
        method:'post',
        data:{
          name:this.ruleForm.name,
          phone:this.ruleForm.phone,
          telephone:this.ruleForm.telephone,
          gender:this.ruleForm.gender,
          vid: this.ruleForm.vid,
          vname:this.ruleForm.vname,
          vmsg:this.ruleForm.vmsg,
          province:this.ruleForm.province,
          city:this.ruleForm.city,
          region:this.ruleForm.region
        }
      }).then(res => {
        console.log(res)
        if (res.data.code === 500){
          this.$message.error('用户已经预约过当前疫苗');
          this.$router.replace("/vaccineManager")
        } else if(res.data.data === "-1") {
          this.$message.error('请选择需要预约的疫苗');
          this.$router.replace("/vaccineManager")
        }else{
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('预约成功!');
              this.$router.replace("/vaccineManager")
            }
          });
        }
      })
    },
    beforeStep(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$bus.$emit("beforeStep",this.flag,this.currentActive,this.ruleForm)
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    console.log(this.userForm)
    this.ruleForm.name=this.userForm.name
    this.ruleForm.gender=this.userForm.gender
    this.ruleForm.phone=this.userForm.phone
    this.ruleForm.telephone=this.userForm.telephone
    this.ruleForm.vid=this.confirm.vid
    this.ruleForm.vname=this.confirm.vname
    this.ruleForm.vmsg=this.confirm.vmsg
    this.ruleForm.province=this.userForm.province
    this.ruleForm.city=this.userForm.city
    this.ruleForm.region=this.userForm.region
  }
}
</script>

<style scoped>
.region{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
